<template>
<div class="ph-datetime-panel">
    <topbar 
    @back="$emit('back')"
    @year-shift="onYearShift"
    @month-shift="onMonthShift"
    @year-navigate="onYearNavigate"
    @month-navigate="onMonthNavigate"
    :year="year" 
    :month="month"
    :mode="mode" 
    :umode="umode"
    :lang="langs"
    :showBackTime="showBackTime"
    />
    <ph-flex class="ph-dt-body">
        <date-picker 
        :year="year" 
        :month="month" 
        :date="cdate" 
        :weekText="weekText"
        :importants="importants"
        :lang="langs"
        @date-change="onDateChange"
        v-show="Mode.date===mode"></date-picker>

        <year-picker 
        @year-change="onYearChange"
        :year="year" 
        :lang="langs"
        v-show="Mode.year===mode"/>

        <month-picker 
        @month-change="onMonthChange"
        :month="month" 
        :year="year"
        :lang="langs"
        v-show="Mode.month===mode"/>

        <time-picker
        :hour="hour"
        :minute="minute"
        :second="second"
        :lang="langs"
        @hour-change="onHourChange"
        @minute-change="onMinuteChange"
        @second-change="onSecondChange"
        v-show="Mode.time===mode"/>
    </ph-flex>
</div>
</template>
<script lang="ts">
import { computed, defineAsyncComponent, defineComponent, PropType, provide, toRefs } from 'vue'
import { destructDate } from '../../shared/datetime'
import {PhFlex} from '../base'
import { Mode } from './config'
import topbar from './topbar.vue'
export default defineComponent({
    components:{
        PhFlex,
        topbar,
        DatePicker:defineAsyncComponent(() => import('./date.vue')),
        YearPicker:defineAsyncComponent(() => import('./year.vue')),
        MonthPicker:defineAsyncComponent(() => import('./month.vue')),
        TimePicker:defineAsyncComponent(() => import('./time.vue'))
    },
    props:{
        theme:{
            type:String,
            default:"dark"
        },
        weekText:{
            type:Array as PropType<Array<string>>
        },
        importants:{
            type:Array as PropType<Array<{title:string|number,md:string}>>
        },
        langs:{
            type:Object as PropType<Record<string,unknown>>
        },
        lang:{type:String},
        value:{
            type:Date,
            default:new Date()
        },
        min:{
            type:[Object,Boolean]
        },
        max:{
            type:[Object,Boolean]
        },
        showBackTime:{
            type:Boolean,
            default:true
        },
        vDo:{type:Object as PropType<{[k:string]:number}>,default:()=>({})},
        mode:{type:Number,default:Mode.date},
        umode:{type:Number,default:Mode.datetime}
    },
    setup(props,{emit}) {
        const {mode,umode,value,max,min} = toRefs(props);
        const date = value
        const year = computed(()=>{
            return date.value.getFullYear()
        })
        const month = computed(()=>{
            return date.value.getMonth()
        })
        const cdate = computed(()=>{
            return date.value.getDate()
        })
        const hour = computed(()=>{
            return date.value.getHours()
        })
        const minute = computed(()=>{
            return date.value.getMinutes()
        })
        const second = computed(()=>{
            return date.value.getSeconds()
        })
        const vDo = computed(()=>{
            return destructDate(date.value)
        })
        provide("start",min)
        provide("end",max)
        provide("dateobj",vDo)
        const updateDateTime = (d:number,i:number,done?:boolean)=>{
            const dts = [year.value,month.value,cdate.value,hour.value,minute.value,second.value]
            dts[i] = d
            notify(new Date(...dts as []),done)
        }
        const onDateChange = (dt:number[])=>{
            notify(new Date(dt[2],dt[1],dt[0],hour.value,minute.value,second.value),umode.value===Mode.date)
        }
        const onYearChange = (y:number)=>{
            const done = umode.value===Mode.year
            updateDateTime(y,0,done)
            if(done)return
            emit("mode-shift",Mode.date)
        }
        const onMonthChange = (m:number)=>{
            const done =umode.value===Mode.month
            updateDateTime(m,1,done)
            if(done)return
            emit("mode-shift",Mode.date)
        }
        const onHourChange = (n:number)=>{
            updateDateTime(n,3)
        }
        const onMinuteChange = (n:number)=>{
            updateDateTime(n,4)
        }
        const onSecondChange = (n:number)=>{
            updateDateTime(n,5)
        }
        const onYearShift = (d:number)=>{
            updateDateTime(year.value+d,0)
        }
        const onMonthShift = (d:number)=>{
            const m = (month.value+d)%12
            const y = year.value+Number(d>0&&!m)
            const dts = [y,m,cdate.value,hour.value,minute.value,second.value]
            notify(new Date(...dts as []))
        }
        const onYearNavigate = ()=>{
            emit("mode-shift",Mode.year)
        }
        const onMonthNavigate = ()=>{
            emit("mode-shift",Mode.month)
        }
        const notify = (v?:Date,done?:boolean)=>{
            emit("pick",v,done)
        }
        
        return {
            Mode,
            year,
            month,
            cdate,
            hour,
            minute,
            second,
            onDateChange,
            onYearChange,
            onMonthChange,
            onHourChange,
            onMinuteChange,
            onSecondChange,
            onYearShift,
            onMonthShift,
            onYearNavigate,
            onMonthNavigate,
            }
    }
})
</script>

<style lang="scss">
.ph-datetime-panel{
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    transition: transform .3s ease;
    backface-visibility: hidden;
    transform: translateX(0);
    .ph-dt-panel{
        padding: var(--ph-dt-panel-padding);
        height: calc(var(--phx) * 17.4994285);
        border-top:1px solid var(--ph-dt-bd);
        border-bottom:1px solid var(--ph-dt-bd);
        width: 100%;
    }
    .ph-action-active,
    .ph-active{
        color: #fff!important;
        background-color:var(--ph-dt-cell-active)!important;
        border-color: transparent;
    }
    .ph-disabled{
        color: inherit!important;
        cursor: not-allowed!important;
        background-color: var(--ph-dt-cell-disabled)!important;
        border-color: var(--ph-dt-cell-disabled)!important;
        opacity: .5;
    }
    .ph-table-panel{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        height: 100%;
        .ph-action{
            width: 33%;
            background-color: var(--ph-dt-cell);
            &:not(.ph-action-active):not(:disabled):hover{
                background-color: var(--ph-dt-cell-hover);
            }
        }
    }
}
</style>